<template>
  <div class="container">
    <div
      class="map-container"
      :style="{
        'background-image':
          'url(' + require('../../assets/monopoly/map.jpg') + ')',
      }"
    >
      <div
        class="players"
        v-for="(item, index) in mapElementInfoList"
        :key="index"
        :style="getStyleByHolder(item)"
      >
        <div
          class="player-box"
          v-for="(childItem, childIndex) in item.players"
          :key="childIndex"
        >
          <div
            :style="`background-image:url(${playersList[childIndex].avatar})`"
            v-if="playersList[childIndex] && childItem == 1"
            class="player-item"
          ></div>
        </div>
      </div>
    </div>
    <div class="rightside">
      <!-- 当前玩家信息 -->
      <div class="current-player">
        <div
          v-for="(item, index) in playersList"
          :key="index"
          class="players-box"
          :style="
            currentPlayer % playerNum == index
              ? 'border:5px solid #000; border-radius: 5px;'
              : ''
          "
          @click.stop="showPlayerInfo(item)"
        >
          <img
            style="width: 50px; height: 50px; border-radius: 50px"
            :src="
              item.active
                ? item.avatar
                : require('../../assets/monopoly/out.jpeg')
            "
            alt=""
          />
          <div v-if="item.active">
            <div>资产：{{ item.gold }}</div>
            <div>背包：{{ item.bag }}</div>
            <!-- <div>行动：{{ item.stop }}</div>
            <div>{{ currentPlayer }}</div> -->
          </div>
          <div v-else>---</div>
        </div>
      </div>
      <!-- 移动 -->
      <div class="move-temp">
        <van-badge :content="value" color="#1989fa">
          <van-button
            :disabled="dicerunning"
            type="info"
            round
            @click.stop="throwDice"
            >点击移动
          </van-button>
        </van-badge>
        <van-rate
          icon="play"
          void-icon="play-o"
          disabled
          disabled-color="red"
          color="red"
          void-color="blue"
          v-model="value"
          :count="6"
        />
      </div>
      <div class="popbox" v-if="showBuyPop">
        <div class="landInfo">
          <div class="land-img" :style="buyPopData.landSrc"></div>
        </div>
        <div class="footer-btn">
          <van-button class="btn" type="info" round @click.stop="buyFunction"
            >购买（{{ buyPopData.money }}）
          </van-button>
          <van-button class="btn" type="default" round @click.stop="nextPlayer">
            取消
          </van-button>
        </div>
      </div>
      <div class="popbox" v-if="showPayPop">
        <div class="landInfo">
          <div class="land-img" :style="buyPopData.landSrc"></div>
        </div>
        <div class="footer-btn">
          <van-button class="btn" type="info" round @click.stop="payFunction"
            >支付（{{ buyPopData.pay }}）
          </van-button>
        </div>
      </div>
      <div class="popbox" v-if="showUpPop">
        <div class="landInfo">
          <div class="land-img" :style="buyPopData.landSrc"></div>
        </div>
        <div class="footer-btn">
          <van-button class="btn" type="info" round @click.stop="upFunction()"
            >升级（{{ buyPopData.upgrade }}）
          </van-button>
          <van-button class="btn" type="default" round @click.stop="nextPlayer">
            取消
          </van-button>
        </div>
      </div>
      <!-- 命运卡 -->
      <div class="popbox" v-if="showDestinyPop">
        <div id="flip-card" class="cardInfo flip-card" @click.stop="cardSelect">
          <div
            class="front"
            :style="{
              'background-image':
                'url(' + require('../../assets/monopoly/destiny.jpg') + ')',
            }"
          ></div>
          <div id="cardback" class="back"></div>
        </div>
        <van-button
          :disabled="!cannext"
          class="btn"
          type="info"
          round
          @click.stop="nextPlayer"
          >确定
        </van-button>
      </div>
      <!-- 机会卡 -->
      <div class="popbox" v-if="showChancePop">
        <div id="flip-card" class="cardInfo flip-card" @click.stop="cardSelect">
          <div
            class="chancefront"
            :style="{
              'background-image':
                'url(' + require('../../assets/monopoly/chance.jpg') + ')',
            }"
          ></div>
          <div id="cardback" class="back"></div>
        </div>
        <van-button
          :disabled="!cannext"
          class="btn"
          type="info"
          round
          @click.stop="nextPlayer"
          >确定
        </van-button>
      </div>
    </div>
    <!-- 查看领地 -->
    <div v-if="showLandsPop" class="lands-box">
      <div class="lands-scroll hide-scrollbar">
        <div class="landInfo" v-for="(item, index) in lands" :key="index">
          <div>{{ item.level }}</div>
          <div
            class="land-img"
            :style="`background-image: url(${
              mapElementInfoList[item.id].landSrc
            })`"
          ></div>
          <!-- 操作按钮 -->
          <van-button
            v-if="
              optionBtn == 'sale' && currentPlayer % playerNum == item.holder
            "
            @click.stop="saleLand(item.id)"
            type="info"
            class="btn"
            round
            >卖了</van-button
          >
          <van-button
            v-if="optionBtn == 'update'"
            @click.stop="updateLanf(item.id)"
            type="info"
            class="btn"
            round
            >升级!</van-button
          >
        </div>
      </div>
      <van-button size="normal" type="default" round @click="showPlayerInfo()">
        确 认
      </van-button>
    </div>
    <!-- 提示栏 -->
    <div v-if="showSalePop" class="sale-box">
      <div class="title">钱不够，卖点什么吧</div>
      <van-button type="info" class="btn" round @click.stop="showPlayerInfo()"
        >好的</van-button
      >
      <van-button
        type="default"
        class="btn"
        round
        @click="defeat()"
        v-if="force"
        >认输</van-button
      >
      <van-button type="default" class="btn" round @click="nextPlayer" v-else
        >取消</van-button
      >
    </div>
  </div>
</template>
<script>
export default {
  created() {},
  mounted() {},
  data() {
    return {
      //投掷结果
      value: 0,
      //当前玩家
      currentPlayer: 0,
      //玩家人数
      playerNum: 4,
      //投掷中...
      dicerunning: false,
      //可以下一步
      cannext: false,
      //购买界面
      showBuyPop: false,
      //付款界面
      showPayPop: false,
      //升级界面
      showUpPop: false,
      //命运卡
      showDestinyPop: false,
      //机会卡
      showChancePop: false,
      //查看领地
      showLandsPop: false,
      //操作按钮
      optionBtn: "sale",
      //拍卖框展示
      showSalePop: false,
      force: false,
      callbackData: {
        player1: "",
        player2: "",
        howmuch: 0,
      },
      //购买数据
      buyPopData: {
        landSrc: "",
        id: "",
        money: "",
        pay: "",
        upgrade: "",
      },
      lands: [],
      //玩家数据
      playersList: [
        {
          id: 0,
          name: "卫龙",
          address: 0,
          avatar: require("../../assets/monopoly/red.jpg"),
          gold: 5000,
          bag: "",
          stop: 0,
          active: 1,
        },
        {
          id: 1,
          name: "饿了么",
          address: 0,
          avatar: require("../../assets/monopoly/blue.jpg"),
          gold: 5000,
          bag: "",
          stop: 0,
          active: 1,
        },
        {
          id: 2,
          name: "美团",
          address: 0,
          avatar: require("../../assets/monopoly/yellow.jpg"),
          gold: 5000,
          bag: "",
          stop: 0,
          active: 1,
        },
        {
          id: 3,
          name: "顺丰",
          address: 0,
          avatar: require("../../assets/monopoly/black.jpg"),
          gold: 5000,
          bag: "",
          stop: 0,
          active: 1,
        },
      ],
      // 标记地图元素信息列表
      mapElementInfoList: [
        {
          top: "667px",
          left: "1056px",
          width: "169px",
          height: "167px",
          players: [1, 1, 1, 1],
          id: 0,
          name: "起点",
        },
        {
          top: "667px",
          left: "945px",
          width: "109px",
          height: "167px",
          players: [0, 0, 0, 0],
          id: 1,
          name: "中国",
          money: 4000,
          landSrc: require("../../assets/monopoly/land4.jpg"),
          holder: null,
          level: 0,
          toll: [500, 2000, 5500, 11500],
          upgrade: 2000,
        },
        {
          top: "667px",
          left: "834px",
          width: "109px",
          height: "167px",
          players: [0, 0, 0, 0],
          id: 2,
          name: "泰国",
          money: 1000,
          landSrc: require("../../assets/monopoly/land16.jpg"),
          holder: null,
          level: 0,
          toll: [100, 300, 900, 2000],
          upgrade: 500,
        },
        {
          top: "667px",
          left: "723px",
          width: "109px",
          height: "167px",
          players: [0, 0, 0, 0],
          name: "机会",
          id: 3,
        },
        {
          top: "667px",
          left: "612px",
          width: "109px",
          height: "167px",
          players: [0, 0, 0, 0],
          id: 4,
          name: "印尼",
          money: 1600,
          landSrc: require("../../assets/monopoly/land7.jpg"),
          holder: null,
          level: 0,
          toll: [200, 600, 1800, 5000],
          upgrade: 1000,
        },
        {
          top: "667px",
          left: "501px",
          width: "109px",
          height: "167px",
          players: [0, 0, 0, 0],
          id: 5,
          name: "自来水厂",
          money: 1200,
          landSrc: require("../../assets/monopoly/land14.jpg"),
          holder: null,
          level: 0,
          toll: [100, 300],
        },
        {
          top: "667px",
          left: "390px",
          width: "109px",
          height: "167px",
          players: [0, 0, 0, 0],
          name: "命运",
          id: 6,
        },
        {
          top: "667px",
          left: "279px",
          width: "109px",
          height: "167px",
          players: [0, 0, 0, 0],
          id: 7,
          name: "上海浦东国际机场",
          money: 2000,
          landSrc: require("../../assets/monopoly/land18.jpg"),
          holder: null,
          level: 0,
          toll: [3000, 5000],
        },
        {
          top: "667px",
          left: "168px",
          width: "109px",
          height: "167px",
          players: [0, 0, 0, 0],
          id: 8,
          name: "日本",
          money: 2000,
          landSrc: require("../../assets/monopoly/land13.jpg"),
          holder: null,
          level: 0,
          toll: [200, 800, 2200, 6000],
          upgrade: 1000,
        },
        {
          top: "667px",
          left: "0",
          width: "166px",
          height: "167px",
          players: [0, 0, 0, 0],
          name: "坐牢",
          id: 9,
        },
        {
          top: "568px",
          left: "0",
          width: "168px",
          height: "96px",
          players: [0, 0, 0, 0],
          id: 10,
          name: "西班牙",
          money: 2200,
          landSrc: require("../../assets/monopoly/land10.jpg"),
          holder: null,
          level: 0,
          toll: [200, 900, 2500, 7000],
          upgrade: 1500,
        },
        {
          top: "469px",
          left: "0",
          width: "168px",
          height: "96px",
          players: [0, 0, 0, 0],
          name: "机会",
          id: 11,
        },
        {
          top: "370px",
          left: "0",
          width: "168px",
          height: "96px",
          players: [0, 0, 0, 0],
          id: 12,
          name: "巴西",
          money: 2400,
          landSrc: require("../../assets/monopoly/land12.jpg"),
          holder: null,
          level: 0,
          toll: [200, 1000, 3000, 7500],
          upgrade: 1500,
        },
        {
          top: "272px",
          left: "0",
          width: "168px",
          height: "96px",
          players: [0, 0, 0, 0],
          id: 13,
        },
        {
          top: "173px",
          left: "0",
          width: "168px",
          height: "96px",
          players: [0, 0, 0, 0],
          id: 14,
          name: "加拿大",
          money: 2600,
          landSrc: require("../../assets/monopoly/land6.jpg"),
          holder: null,
          level: 0,
          toll: [300, 1100, 3300, 8000],
          upgrade: 1500,
        },
        {
          top: "0",
          left: "0",
          width: "171px",
          height: "171px",
          players: [0, 0, 0, 0],
          id: 15,
        },
        {
          top: "7px",
          left: "173px",
          width: "109px",
          height: "166px",
          players: [0, 0, 0, 0],
          id: 16,
          name: "土耳其",
          money: 2200,
          landSrc: require("../../assets/monopoly/land3.jpg"),
          holder: null,
          level: 0,
          toll: [200, 900, 2500, 7000],
          upgrade: 1500,
        },
        {
          top: "7px",
          left: "284px",
          width: "109px",
          height: "166px",
          players: [0, 0, 0, 0],
          id: 17,
          name: "美国",
          money: 2400,
          landSrc: require("../../assets/monopoly/land8.jpg"),
          holder: null,
          level: 0,
          toll: [200, 1000, 3000, 7500],
          upgrade: 1500,
        },
        {
          top: "7px",
          left: "394px",
          width: "109px",
          height: "166px",
          players: [0, 0, 0, 0],
          name: "命运",
          id: 18,
        },
        {
          top: "7px",
          left: "505px",
          width: "109px",
          height: "166px",
          players: [0, 0, 0, 0],
          id: 19,
          name: "英国",
          money: 3000,
          landSrc: require("../../assets/monopoly/land9.jpg"),
          holder: null,
          level: 0,
          toll: [300, 1300, 3900, 9000],
          upgrade: 2000,
        },
        {
          top: "7px",
          left: "615px",
          width: "105px",
          height: "166px",
          players: [0, 0, 0, 0],
          id: 20,
          name: "德国",
          money: 3600,
          landSrc: require("../../assets/monopoly/land17.jpg"),
          holder: null,
          level: 0,
          toll: [400, 1800, 5000, 11000],
          upgrade: 2000,
        },
        {
          top: "7px",
          left: "723px",
          width: "107px",
          height: "166px",
          players: [0, 0, 0, 0],
          id: 21,
          name: "伦敦希思罗国际机场",
          money: 2000,
          landSrc: require("../../assets/monopoly/land5.jpg"),
          holder: null,
          level: 0,
          toll: [3000, 5000],
        },
        {
          top: "7px",
          left: "832px",
          width: "109px",
          height: "166px",
          players: [0, 0, 0, 0],
          name: "机会",
          id: 22,
        },
        {
          top: "7px",
          left: "943px",
          width: "109px",
          height: "166px",
          players: [0, 0, 0, 0],
          id: 23,
        },
        {
          top: "6px",
          left: "1054px",
          width: "170px",
          height: "166px",
          players: [0, 0, 0, 0],
          id: 24,
        },
        {
          top: "175px",
          left: "1054px",
          width: "170px",
          height: "98px",
          players: [0, 0, 0, 0],
          id: 25,
          name: "俄罗斯",
          money: 3200,
          landSrc: require("../../assets/monopoly/land11.jpg"),
          holder: null,
          level: 0,
          toll: [300, 1500, 4500, 10000],
          upgrade: 2000,
        },
        {
          top: "275px",
          left: "1054px",
          width: "170px",
          height: "93px",
          players: [0, 0, 0, 0],
          name: "命运",
          id: 26,
        },
        {
          top: "370px",
          left: "1054px",
          width: "170px",
          height: "98px",
          players: [0, 0, 0, 0],
          id: 27,
          name: "法国",
          money: 2200,
          landSrc: require("../../assets/monopoly/land15.jpg"),
          holder: null,
          level: 0,
          toll: [200, 900, 2500, 7000],
          upgrade: 1500,
        },
        {
          top: "470px",
          left: "1054px",
          width: "170px",
          height: "95px",
          players: [0, 0, 0, 0],
          id: 28,
          name: "电力公司",
          money: 1200,
          landSrc: require("../../assets/monopoly/land2.jpg"),
          holder: null,
          level: 0,
          toll: [100, 300],
        },
        {
          top: "567px",
          left: "1054px",
          width: "170px",
          height: "98px",
          players: [0, 0, 0, 0],
          id: 29,
          name: "印度",
          money: 1000,
          landSrc: require("../../assets/monopoly/land1.jpg"),
          holder: null,
          level: 0,
          toll: [100, 300, 900, 2700],
          upgrade: 500,
        },
      ],
      //地图事件列表
      mapFunctionList: [
        {
          stop: (address, player) => {
            console.log("stop", address);
            this.changeMoney(player, -1, 4000);
          },
          pass: (address, player) => {
            console.log("pass", address);
            this.changeMoney(player, -1, 2000);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(1);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(1);
            } else {
              this.showPayFunction(1);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(2);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(2);
            } else {
              this.showPayFunction(2);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            this.showChanceFunction(3);
            console.log("stop", address);
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(4);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(4);
            } else {
              this.showPayFunction(4);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(5);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(5);
            } else {
              this.showPayFunction(5);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            this.showDestinyFunction(6);
            console.log("stop", address);
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(7);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(7);
            } else {
              this.showPayFunction(7);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(8);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(8);
            } else {
              this.showPayFunction(8);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            //9
            if (this.playersList[player].bag) {
              alert("使用出狱许可证");
              this.playersList[player].bag = null;
            } else {
              this.playersList[player].stop++;
            }
            this.nextPlayer();
            console.log("stop", address);
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(10);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(10);
            } else {
              this.showPayFunction(10);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            this.showChanceFunction(11);
            console.log("stop", address);
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(12);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(12);
            } else {
              this.showPayFunction(12);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            // 13
            this.force = true;
            let res = this.changeMoney(-1, player, 700);
            if (res) {
              this.nextPlayer();
            }
            console.log("stop", address);
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(14);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(14);
            } else {
              this.showPayFunction(14);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            //15
            this.playersList[player].stop++;
            this.nextPlayer();
            console.log("stop", address);
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(16);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(16);
            } else {
              this.showPayFunction(16);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(17);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(17);
            } else {
              this.showPayFunction(17);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            this.showDestinyFunction(18);
            console.log("stop", address);
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(19);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(19);
            } else {
              this.showPayFunction(19);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(20);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(20);
            } else {
              this.showPayFunction(20);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(21);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(21);
            } else {
              this.showPayFunction(21);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            this.showChanceFunction(22);
            console.log("stop", address);
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            //23
            this.force = true;
            let res = this.changeMoney(-1, player, 500);
            if (res) {
              this.nextPlayer();
            }
            console.log("stop", address);
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            //24前往坐牢
            // this.playersList[player].gold -= 2000;
            // this.moving(player, 15, 50);
            setTimeout(() => {
              let oldAddress = Number(this.playersList[player].address);
              let newAddress = Number(this.playersList[player].address) + 15;
              this.mapElementInfoList[oldAddress % 30].players[player] = 0;
              this.mapElementInfoList[newAddress % 30].players[player] = 1;
              this.playersList[player].address = newAddress;
              console.log("stop", address);
              this.mapFunction(newAddress, "stop", player);
            }, 1500);
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(25);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(25);
            } else {
              this.showPayFunction(25);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            this.showDestinyFunction(26);
            console.log("stop", address);
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(27);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(27);
            } else {
              this.showPayFunction(27);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(28);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(28);
            } else {
              this.showPayFunction(28);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
        {
          stop: (address, player) => {
            if (this.mapElementInfoList[address].holder == null) {
              this.showBuyFunction(29);
            } else if (this.mapElementInfoList[address].holder == player) {
              this.showUpFunction(29);
            } else {
              this.showPayFunction(29);
            }
          },
          pass: (address, player) => {
            console.log("pass", address);
          },
        },
      ],
      //命运卡效果
      destinyList: [
        {
          id: 0,
          func: () => {
            this.changeMoney(this.currentPlayer % this.playerNum, -1, 300);
          },
        },
        {
          id: 1,
          func: () => {
            this.changeMoney(-1, this.currentPlayer % this.playerNum, 800);
          },
        },
        {
          id: 2,
          func: () => {
            // this.changeMoney(-1, this.currentPlayer, 1000);
          },
        },
        {
          id: 3,
          func: () => {
            // this.changeMoney(this.currentPlayer, -1, 1200);
          },
        },
        {
          id: 4,
          func: () => {
            // 出狱许可证
            this.playersList[this.currentPlayer % this.playerNum].bag =
              "出狱许可证";
          },
        },
        {
          id: 5,
          func: () => {
            this.changeMoney(this.currentPlayer % this.playerNum, -1, 1000);
          },
        },
        {
          id: 6,
          func: () => {
            // this.changeMoney(this.currentPlayer, -1, 800);
            this.playersList[this.currentPlayer % this.playerNum].stop++;
          },
        },
        {
          id: 7,
          func: () => {
            let player = this.currentPlayer % this.playerNum;
            let oldAddress = Number(this.playersList[player].address);
            let newAddress = 9;
            this.mapElementInfoList[oldAddress % 30].players[player] = 0;
            this.mapElementInfoList[newAddress % 30].players[player] = 1;
            this.playersList[player].address = newAddress;
            this.mapFunction(newAddress, "stop", player);
          },
        },
        {
          id: 8,
          func: () => {
            // this.changeMoney(-1, this.currentPlayer, 700);
            this.playersList[this.currentPlayer % this.playerNum].stop--;
          },
        },
        {
          id: 9,
          func: () => {
            // this.playersList[this.currentPlayer % this.playerNum].stop++;
          },
        },
        {
          id: 10,
          func: () => {
            this.force = true;
            this.changeMoney(-1, this.currentPlayer % this.playerNum, 600);
          },
        },
        {
          id: 11,
          func: () => {
            this.force = true;
            this.changeMoney(-1, this.currentPlayer % this.playerNum, 1200);
          },
        },
      ],
      //机会卡效果
      chanceList: [
        {
          id: 0,
          func: () => {
            this.force = true;
            this.changeMoney(-1, this.currentPlayer % this.playerNum, 500);
          },
        },
        {
          id: 1,
          func: () => {
            this.changeMoney(this.currentPlayer % this.playerNum, -1, 500);
          },
        },
        {
          id: 2,
          func: () => {
            this.force = true;
            this.changeMoney(-1, this.currentPlayer % this.playerNum, 1000);
          },
        },
        {
          id: 3,
          func: () => {
            this.changeMoney(this.currentPlayer % this.playerNum, -1, 1200);
          },
        },
        {
          id: 4,
          func: () => {
            this.changeMoney(this.currentPlayer % this.playerNum, -1, 800);
          },
        },
        {
          id: 5,
          func: () => {
            this.force = true;
            var resArr = this.playersList.filter((item) => {
              return (
                item.id != this.currentPlayer % this.playerNum &&
                item.active == 1
              );
            });
            resArr.forEach((ele) => {
              this.callbackData = {
                player1: his.currentPlayer % this.playerNum,
                player2: ele.id,
                howmuch: 300,
              };
              this.changeMoney(
                this.currentPlayer % this.playerNum,
                ele.id,
                300
              );
            });
          },
        },
        {
          id: 6,
          func: () => {
            this.force = true;
            this.changeMoney(-1, this.currentPlayer % this.playerNum, 700);
          },
        },
        {
          id: 7,
          func: () => {
            this.changeMoney(this.currentPlayer % this.playerNum, -1, 800);
          },
        },
        {
          id: 8,
          func: () => {
            // this.changeMoney(-1, this.currentPlayer, 700);
          },
        },
        {
          id: 9,
          func: () => {
            var resArr = this.playersList.filter((item) => {
              return item.id != this.currentPlayer % this.playerNum;
            });
            this.changeMoney(
              -1,
              this.currentPlayer % this.playerNum,
              200 * (this.playersList.length - 1)
            );
            resArr.forEach((element) => {
              this.changeMoney(element.id, -1, 200);
            });
          },
        },
        {
          id: 10,
          func: () => {},
        },
        {
          id: 11,
          func: () => {
            this.force = true;
            this.changeMoney(-1, this.currentPlayer % this.playerNum, 900);
          },
        },
      ],
    };
  },
  methods: {
    //掷骰子
    async throwDice() {
      if (this.dicerunning) return;
      this.dicerunning = true;
      let res = this.getRandomInt(1, 6);
      // let res = 6;
      let step = 0;
      let add = 1;
      let speed = 10;
      let wait = () =>
        new Promise((resolve) => {
          setTimeout(resolve, speed);
        });
      this.value = 0;
      do {
        await wait();
        if (this.value == 6) {
          add = -1;
        }
        if (this.value == 0) {
          add = 1;
        }
        this.value += add;
        step++;
        speed += (step * step) / 800;
        // this.$forceUpdate();
      } while (this.value != Math.ceil(res) || step < 50);
      await this.moving(this.currentPlayer % this.playerNum, res);
      // this.dicerunning = false;
    },
    //随机数
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    //移动
    async moving(player, step, speed = 500) {
      console.log(player, "player");
      let wait = () =>
        new Promise((resolve) => {
          setTimeout(resolve, speed);
        });
      for (let i = 0; i < step; i++) {
        await wait();
        let oldAddress = Number(this.playersList[player].address);
        let newAddress = Number(this.playersList[player].address) + 1;
        this.mapElementInfoList[oldAddress % 30].players[player] = 0;
        this.mapElementInfoList[newAddress % 30].players[player] = 1;
        this.playersList[player].address = newAddress;
        if (i === step - 1) {
          this.mapFunction(newAddress, "stop", player);
        } else {
          this.mapFunction(newAddress, "pass", player);
        }
        this.$forceUpdate();
      }
    },
    //触发地图方法
    mapFunction(address, functionName, player) {
      if (this.mapFunctionList[address % 30][functionName]) {
        this.mapFunctionList[address % 30][functionName](address % 30, player);
      }
    },
    /**
     * 金钱变动
     * player1 加钱方 0-3，-1为银行
     * player2 扣钱方 0-3，-1为银行
     * howmuch 金额
     */
    changeMoney(player1, player2, howmuch) {
      if (
        player2 != -1 &&
        this.playersList[player2 % this.playerNum].gold < howmuch
      ) {
        this.callbackData = {
          player1: player1,
          player2: player2,
          howmuch: howmuch,
        };
        this.showSalePop = true;
        return false;
      }
      if (player1 != -1) {
        this.playersList[player1 % this.playerNum].gold += howmuch;
      }
      if (player2 != -1) {
        this.playersList[player2 % this.playerNum].gold -= howmuch;
      }
      return true;
    },
    /**
     * 领地变动
     * player1 获得方 0-3, -1为银行
     * player2 失去方 0-3, -1为银行
     * landId 领地 0-28
     */
    changeLand(player1, player2, landId) {
      if (player1 != -1) {
        this.mapElementInfoList[landId].holder = player1;
      }
      if (player2 != -1) {
        this.mapElementInfoList[landId].holder = null;
        this.mapElementInfoList[landId].level = 0;
      }
      return true;
    },
    //下一个玩家
    async nextPlayer() {
      console.log("nextplayer");
      this.showBuyPop = false;
      this.showPayPop = false;
      this.showUpPop = false;
      this.showDestinyPop = false;
      this.showChancePop = false;
      this.cannext = false;
      this.showLandsPop = false;
      this.showSalePop = false;
      /**
       * stop  0正常 >0停留 <0 连动
       */
      if (this.playersList[this.currentPlayer % this.playerNum].stop >= 0) {
        // 下一位玩家-跳过已退出玩家
        do {
          this.currentPlayer++;
        } while (
          this.playersList[this.currentPlayer % this.playerNum].active == 0
        );
        if (this.playersList[this.currentPlayer % this.playerNum].stop > 0) {
          console.log("next3");
          this.playersList[this.currentPlayer % this.playerNum].stop--;
          if (this.playersList[this.currentPlayer % this.playerNum].stop > 0) {
            alert(
              `${
                this.playersList[this.currentPlayer % this.playerNum].name
              }停留1回合（还有${
                this.playersList[this.currentPlayer % this.playerNum].stop
              }回合）`
            );
          } else {
            alert(
              `${
                this.playersList[this.currentPlayer % this.playerNum].name
              }停留1回合`
            );
          }
          this.nextPlayer();
          return;
        }
        this.dicerunning = false;
        console.log("next1");
        return;
      } else if (
        this.playersList[this.currentPlayer % this.playerNum].stop < 0
      ) {
        this.playersList[this.currentPlayer % this.playerNum].stop++;
        this.dicerunning = false;
        console.log("next2");
        return;
      }
    },
    //购买
    showBuyFunction(id) {
      this.buyPopData.landSrc = `background-image: url(${this.mapElementInfoList[id].landSrc})`;
      this.buyPopData.id = id;
      this.buyPopData.money = this.mapElementInfoList[id].money;
      this.showBuyPop = true;
      this.$forceUpdate();
    },
    async buyFunction() {
      let id = this.buyPopData.id;
      this.force = false;
      let res1 = await this.changeMoney(
        -1,
        this.currentPlayer % this.playerNum,
        this.mapElementInfoList[id].money
      );
      if (res1) {
        await this.changeLand(this.currentPlayer % this.playerNum, -1, id);
        this.nextPlayer();
      }
    },
    //升级
    showUpFunction(id) {
      this.buyPopData.landSrc = `background-image: url(${this.mapElementInfoList[id].landSrc})`;
      this.buyPopData.id = id;
      this.buyPopData.money = this.mapElementInfoList[id].money;
      this.buyPopData.holder = this.mapElementInfoList[id].holder;
      this.buyPopData.upgrade = this.mapElementInfoList[id].upgrade;
      this.showUpPop = true;
      this.$forceUpdate();
    },
    async upFunction(clickId, playerId) {
      let id = clickId || this.buyPopData.id;
      let holderId =
        playerId || playerId == 0
          ? playerId
          : this.currentPlayer % this.playerNum;
      console.log("升级", id);
      if (
        this.mapElementInfoList[id].level ==
        this.mapElementInfoList[id].toll.length
      ) {
        alert("已满级");
        return false;
      }
      this.callbackData = {
        player1: -1,
        player2: holderId,
        howmuch: this.mapElementInfoList[id].upgrade,
      };
      //扣钱
      let res = await this.changeMoney(
        -1,
        holderId,
        this.mapElementInfoList[id].upgrade
      );
      //升级
      if (res) {
        this.mapElementInfoList[id].level++;
        this.nextPlayer();
      }
    },
    // 过路费
    showPayFunction(id) {
      this.buyPopData.landSrc = `background-image: url(${this.mapElementInfoList[id].landSrc})`;
      this.buyPopData.id = id;
      this.buyPopData.money = this.mapElementInfoList[id].money;
      this.buyPopData.holder = this.mapElementInfoList[id].holder;
      this.buyPopData.upgrade = this.mapElementInfoList[id].upgrade;
      this.buyPopData.pay =
        this.mapElementInfoList[id].toll[this.mapElementInfoList[id].level];
      this.showPayPop = true;
      this.$forceUpdate();
    },
    async payFunction() {
      let id = this.buyPopData.id;
      let pay = this.buyPopData.pay;
      let holder = this.buyPopData.holder;
      this.force = true;
      let flag = await this.changeMoney(holder, id, pay);
      if (flag) {
        this.nextPlayer();
      }
    },
    // 抽卡
    showDestinyFunction(id) {
      let res = this.getRandomInt(1, 12);
      this.showDestinyPop = true;
      setTimeout(() => {
        let element = document.getElementById("cardback");
        // let url = "../../assets/monopoly/destiny" + res + ".jpg";
        element.style.backgroundImage = `url(${require("../../assets/monopoly/destiny" +
          res +
          ".jpg")}
        )`;
        this.destinyList[res - 1].func();
      }, 500);
    },
    showChanceFunction(id) {
      let res = this.getRandomInt(1, 12);
      this.showChancePop = true;
      setTimeout(() => {
        let element = document.getElementById("cardback");
        element.style.backgroundImage = `url(${require("../../assets/monopoly/chance" +
          res +
          ".jpg")}
        )`;
        console.log(res, "refgnbvcx");
        this.chanceList[res - 1].func();
      }, 500);
    },
    //卡片翻转
    cardSelect() {
      var flipCard = document.getElementById("flip-card");
      flipCard.classList.toggle("flipped");
      this.cannext = true;
    },
    //更新领地渲染
    getStyleByHolder(item) {
      let style = item;
      let colorList = ["red", "blue", "yellow", "black"];
      if (item.holder || item.holder == 0) {
        style.border = `3px solid ${colorList[item.holder]}`;
      } else {
        style.border = "none";
      }
      return style;
    },
    showPlayerInfo(i) {
      let item = i || this.playersList[this.currentPlayer % this.playerNum];
      if (!this.showLandsPop) {
        let lands = this.mapElementInfoList.filter((el) => {
          return el.holder == item.id;
        });
        this.showLands(lands);
      } else {
        this.showLandsPop = false;
        // 如果拍卖提示框处于激活状态--关闭提示框，再次触发扣钱
        if (this.showSalePop) {
          this.showSalePop = false;
          console.log("关闭了窗口");
          this.callback();
        }
      }
    },
    showLands(lands) {
      this.lands = lands;
      this.showLandsPop = true;
    },
    saleLand(id, recall) {
      let saleLand = this.mapElementInfoList[id];
      this.playersList[this.currentPlayer % this.playerNum].gold +=
        Number(saleLand.money) +
        Math.ceil(Number(saleLand.level) * Number(saleLand.upgrade || 0)) * 0.5;
      this.mapElementInfoList[id].holder = null;
      this.mapElementInfoList[id].level = 0;
      this.lands = this.lands.filter((ele) => {
        return ele.id != id;
      });
      this.$forceUpdate();
    },
    //默认淘汰当前玩家
    defeat(id) {
      let currentId = id || id == 0 ? id : this.currentPlayer % this.playerNum;
      let address = this.playersList[currentId].address;
      //去掉棋子
      this.mapElementInfoList[address].players[currentId] = 0;
      //领地清空
      this.mapElementInfoList.forEach((item) => {
        if (item.holder == currentId) {
          item.holder = null;
        }
      });
      //停留状态清空
      this.playersList[currentId].stop = 0;
      //出狱许可证归还
      this.playersList[currentId].bag = "";
      //去除玩家
      this.playersList[currentId].active = 0;
      //下一个玩家
      this.nextPlayer();
    },
    callback() {
      let { player1, player2, howmuch } = this.callbackData;
      this.changeMoney(player1, player2, howmuch);
    },
  },
};
</script>
<style scoped lang="less">
body {
  box-sizing: border-box;
}
.container {
  position: relative;
  display: flex;
  .map-container {
    // background-image: url("../../assets/monopoly/map.jpg");
    background-size: cover;
    width: 1225px;
    height: 837px;
    position: relative;
    .players {
      position: absolute;
      .player-box {
        position: relative;
        display: inline-block;
        .player-item {
          width: 40px;
          height: 40px;
          border-radius: 40px;
          background-size: cover;
        }
      }
    }
  }
  .rightside {
    flex-grow: 1;
    background-color: #efefef;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    .current-player {
      background-color: #ffe6e6;
      //   overflow: scroll;
      //   padding: 20px 40px;
      //   border-radius: 10px;
      //   text-align: start;
      display: flex;
      .players-box {
        font-size: 12px;
        width: 25%;
        padding: 20px 0;
      }
    }
    .move-temp {
      margin-top: 100px;
    }
    .popbox {
      height: 500px;
      background-color: #ffe6e6;
      // margin: 20px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      padding: 20px;
      .landInfo {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        .land-img {
          width: 250px;
          height: 425px;
          background-size: cover;
        }
        .land-desc {
          flex-grow: 1;
        }
      }
      .cardInfo {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        .back {
          height: 425px;
          width: 250px;
          background-size: cover;
          // transform: rotate(90deg); /* 旋转角度 */
          // transform-origin: ; /* 旋转中心点 */
        }

        .land-desc {
          flex-grow: 1;
        }
      }
      .footer-btn {
        .btn {
          width: 40%;
        }
      }
    }
  }
  .lands-box {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background-color: rgba(238, 223, 223, 1);
    z-index: 999;
    .lands-scroll {
      width: 100%;
      height: 90%;
      overflow-x: scroll;
      // white-space: nowrap;
      .landInfo {
        margin-top: 40px;
        width: 250px;
        height: 425px;
        display: inline-block;
        .land-img {
          width: 250px;
          height: 425px;
          background-size: cover;
        }
        .btn {
          width: 100px;
          height: 40px;
          margin: 10px 0;
        }
      }
    }
  }
  .sale-box {
    position: absolute;
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    background-color: rgb(255, 255, 255);
    .title {
      height: calc(100% - 60px);
      font-size: 20px;
      line-height: 10;
    }
    .btn {
      width: 100px;
      height: 40px;
      margin: 10px 40px;
    }
  }
}

@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

.flip-container {
  perspective: 1000px;
}

.flip-card {
  height: 425px;
  width: 250px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.flip-card .front,
.flip-card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  // backface-visibility: hidden;
}

.flip-card .front {
  height: 425px;
  width: 250px;
  background-size: cover;
  // background-image: url("../../assets/monopoly/destiny.jpg");
}
.flip-card .chancefront {
  height: 425px;
  width: 250px;
  background-size: cover;
  // background-image: url("../../assets/monopoly/chance.jpg");
}

.flip-card .back {
  height: 425px;
  width: 250px;
  background-size: cover;
  /* 初始时设置透明度为0，使得背面不可见 */
  opacity: 0;
  /* 过渡透明度，与翻转动画同步 */
  transition: opacity 1s;
  transform: rotateY(180deg);
}

.flip-card.flipped {
  transform: rotateY(180deg);
}
.flip-card.flipped .back {
  /* 当卡片翻转时，设置背面为可见 */
  opacity: 1;
}

/* 允许内容垂直滚动，但隐藏滚动条（同时适用于水平和垂直滚动条） */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.hide-scrollbar::-webkit-scrollbar {
  /* WebKit/Blink */
  display: none;
}
</style>
